<template>
  <div class="main">
    <div class="resutDetailWrap">
      <div class="back topBackWrap">
        <div class="toper">
          <!-- <go-back aa="../evaluation/reportRecord" :goes="false"></go-back>
          <h2>综合测评结果</h2>-->
          <go-back :goes="false"></go-back>
          <h2>综合测评结果</h2>
        </div>
      </div>
      <div class="reuDelWrap">
        <scroller>
          <div class="reuWrap">
            <div class="major-box">
              <h3>您的意向专业是</h3>
              <div class="major flex-h">
                <span v-for="i in resultData.majoring" :key="i"  @click="gotoMajor('/professional/majorList', i)">{{i}}</span>
              </div>
            </div>
            <div class="subject-score-box">
              <h3>您的优势科目排序是</h3>
              <div class="subject flex-h" v-for="(item,index) in rankings" :key="item">
                <span class="left flex1">
                  <i>NO.{{index+1}}</i>
                  <b>{{item}}</b>
                </span>
                <span class="right flex1">
                  <img src="~@/static/images/pic_decoration.png" alt />
                  <b>{{rankScoreData[item].num}}分</b>
                </span>
              </div>
            </div>
            <div class="restricted-box">
              <div class="restricted flex-h">
                <span class="left flex1">高校限科要求</span>
                <span class="right flex1" v-if="demandData">{{demandData}}</span>
              </div>
            </div>
            <div class="ranking-box">
              <h3>组合方案排名</h3>
              <div class="ranking flex-h">
                <div class="case-box" v-for="(its,inidex) in schemeData" :key="inidex">
                  <b>{{inidex+1}}</b>
                  <div class="case">
                    <div v-for="(i,$index) in its" :key="$index">
                      <span>{{i}}</span>
                      <i v-if="$index!=2">+</i>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- <div class="already-opened-box">
              <h3>该校已开设的组合</h3>
              <div class="already flex-h">
                <span class="left">
                  政治+历史+地理
                </span>
                <span class="right">
                   政治+历史+地理
                </span>
				 <span class="left">
                  政治+历史+地理
                </span>
                <span class="right">
                   政治+历史+地理
                </span>
              </div>
            </div>-->
            <!-- <div style="height:5rem"></div> -->
          </div>
        </scroller>
        <!-- <div class="footer">
			按钮
        </div>-->
      </div>
    </div>
  </div>
</template>
<script>
import ls from "store2";
import goBack from "~/components/goBack";
import { getmajorlistbyname } from "~/api/repository";
export default {
  components: {
    goBack
  },
  data() {
    return {
      resultData: [],
      rankings: [],
      rankScoreData: [],
      schemeData: [],
      demandData: ""
    };
  },
  mounted: function() {
    this.getData();
  },
  methods: {
    getData() {
      this.resultData = JSON.parse(sessionStorage.getItem("electiveData"));
      this.schemeData = JSON.parse(this.resultData.scheme);
      this.demandData = this.resultData.demand[0];
      if (typeof this.resultData.ranking == "string") {
        try {
          let obj = JSON.parse(this.resultData.ranking);
          this.rankScoreData = JSON.parse(this.resultData.ranking);
          if (typeof obj == "object" && obj) {
            let sorted_keys_array = Object.keys(obj).sort((a, b) => {
              return obj[b].num - obj[a].num;
            });
            this.rankings = sorted_keys_array;
            return true;
          } else {
            return false;
          }
        } catch (e) {
          // console.log("error第：" +index +"条有问题" +item.ranking +"!!!" +e);
          // $index = index;
          return false; /*  */
        }
      }
    },
    gotoMajor(routerName, queryData) {
      getmajorlistbyname({
        catalog_name: queryData
      }).then(res => {
        if (res.code == 200) {
          const data = res.data[0];
          if (data) {
            let catalogData = {
              catalog_name: data.catalog_name,
              catalog_code: data.catalog_code,
              majors: data.majors
            };
            ls.set("catalogMsg", catalogData);
            ls.set("preUrlEvaluation", "../evaluation/reportRecord");
            // this.$router.push({ path: routerName });
            this.$router.push({ path: routerName+"?type="+data.catalog_name });
          } else {
            this.$vux.toast.text("抱歉该专业没有对应详情");
          }
        } else {
          this.$vux.toast.text("抱歉该专业没有对应详情");
        }
      });
    },
    
  },
  beforeDestroy() {}
};
</script>  

<style scoped lang="less">
.resutDetailWrap {
  width: 7.5rem;
  height: 100vh;

  .reuDelWrap {
    width: 7.5rem;
    height: auto;

    .reuWrap {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding-top: 2rem;

      .major-box,
      .subject-score-box,
      .restricted-box,
      .ranking-box,
      .already-opened-box {
        width: 6.9rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
        border-radius: 0.2rem;
        padding: 0.3rem;
        box-sizing: border-box;
      }
      .major-box {
        height: auto;

        margin: 0 auto;

        .major {
          // justify-content: space-between;
          flex-wrap:wrap; 
          justify-content:flex-start;
          span {
            margin-right: 0.2rem;
            height: 0.8rem;
            background: rgba(245, 245, 250, 1);
            border-radius: 0.1rem;
            text-align: center;
            line-height: 0.8rem;
            font-size: 0.3rem;
            font-family: PingFangSC-Regular, PingFangSC;
            font-weight: 400;
            color: rgba(34, 34, 34, 1);
            line-height: 0.8rem;
            padding: 0 0.3rem;
            margin-top:0.2rem; 
          }
        }
      }
      .subject-score-box {
        height: auto;
        margin: 0.3rem auto 0;
        .subject {
          height: 0.8rem;
          .left {
            text-align: left;
            i,
            b {
              font-size: 0.3rem;
              font-family: DIN-Bold, DIN;
              font-weight: bold;
            }
            i {
              color: rgba(153, 153, 153, 1);
            }
            b {
              margin-left: 0.2rem;
              font-weight: 400;
              color: rgba(34, 34, 34, 1);
            }
          }
          .right {
            text-align: right;
            img,
            b {
              vertical-align: middle;
            }
            img {
              display: inline-block;
              width: 1.24rem;
              height: 0.12rem;
            }
            b {
              font-size: 0.3rem;
              font-family: PingFangSC-Semibold, PingFangSC;
              font-weight: 600;
              color: rgba(153, 153, 153, 1);
              margin-left: 0.2rem;
            }
          }
        }
        .subject:nth-of-type(1) {
          .left,
          .right {
            i,
            b {
              font-weight: 600;
              color: rgba(255, 173, 13, 1);
            }
          }
        }
        .subject:nth-of-type(2) {
          .left,
          .right {
            i,
            b {
              font-weight: 600;
              color: rgba(241, 116, 103, 1);
            }
          }
        }
        .subject:nth-of-type(3) {
          .left,
          .right {
            i,
            b {
              font-weight: 600;
              color: rgba(56, 120, 255, 1);
            }
          }
        }
      }
      .restricted-box {
        height: auto;
        margin: 0.3rem auto 0;
        .restricted {
          span {
            font-size: 0.3rem;
            font-family: PingFangSC-Semibold, PingFangSC;
            line-height: 0.6rem;
            font-weight: 600;
          }
          .left {
            color: rgba(34, 34, 34, 1);
            text-align: left;
          }
          .right {
            color: rgba(128, 213, 102, 1);
            text-align: right;
          }
        }
      }
      .ranking-box {
        margin: 0.3rem auto 0;

        .ranking {
          justify-content: space-between;
          .case-box {
            width: 1.9rem;
            height: 2.9rem;
            overflow: hidden;
            position: relative;
            .case {
              margin: 0.25rem auto 0;
              width: 1.8rem;
              height: 2.5rem;
              background: rgba(255, 255, 255, 1);
              box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
              border-radius: 0.1rem;
              padding-top: 0.45rem;
              box-sizing: border-box;
              span,
              i {
                display: block;
                text-align: center;
              }
              span {
                font-size: 0.26rem;
                font-family: PingFangSC-Semibold, PingFangSC;
                font-weight: 600;
                color: rgba(34, 34, 34, 1);
                line-height: 0.4rem;
              }
              i {
                color: rgba(199, 199, 199, 1);
                font-size: 0.2rem;
                line-height: 0.4rem;
              }
            }
            b {
              position: absolute;
              width: 0.5rem;
              height: 0.5rem;
              top: 0;
              left: 50%;
              margin-left: -0.25rem;
              background: #ffad0d;
              border-radius: 50%;
              text-align: center;
              line-height: 0.5rem;
              font-size: 0.3rem;
              font-family: DIN-Bold, DIN;
              font-weight: bold;
              color: rgba(255, 255, 255, 1);
            }
          }
          .case-box:nth-of-type(2) {
            b {
              background: #f17467;
            }
          }
          .case-box:nth-of-type(3) {
            b {
              background: #3878ff;
            }
          }
        }
      }
      .already-opened-box {
        margin: 0.3rem auto 0;
        .already {
          flex-wrap: wrap;
          justify-content: space-between;
          span {
            width: 3rem;
            height: 0.8rem;
            background: rgba(245, 245, 250, 1);
            border-radius: 0.1rem;
            font-size: 0.28rem;
            font-family: PingFangSC-Regular, PingFangSC;
            font-weight: 400;
            color: rgba(34, 34, 34, 1);
            margin-top: 0.2rem;
            text-align: center;
            line-height: 0.8rem;
          }
        }
      }
      h3 {
        font-size: 0.3rem;
        font-family: "PingFangSC-Semibold", PingFangSC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 0.7rem;
      }
    }
    .footer {
      position: fixed;
      width: 100%;
      height: 5rem;
      background: yellow;
      left: 0;
      bottom: 0;
    }
  }
  .back {
    width: 100%;
    height: auto;

    h2 {
      padding: 0 0.3rem;
      box-sizing: border-box;
      display: block;
      height: 0.8rem;
      font-size: 0.44rem;

      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      line-height: 0.8rem;
    }
  }
  .topBackWrap {
    height: 3.1rem;
    width: 100%;
    background: url("~/static/images/selectcourses_banner_results.png")
      no-repeat;
    background-size: 100% 100%;
    .toper {
      background: url("~/static/images/selectcourses_banner_results.png")
        no-repeat;
      background-size: 100%;
      height: 2rem;
      // background: yellow;
      position: relative;
      z-index: 100;
    }
    //
  }
}
</style>
